// uno.config.ts
import {
	defineConfig,
	presetIcons,
	presetUno,
	presetAttributify,
	transformerDirectives,
	transformerVariantGroup
} from "unocss";

export default defineConfig({
	// ...UnoCSS选项
	shortcuts: {
		"flex-center": "flex items-center justify-center",
		"flex-end": "flex items-center justify-end",
		"flex-start": "flex items-center justify-start",
		"flex-between": "flex grid-justify-between flex-items-center",
		"no-outline": "outline-none focus:outline-none",
		"wh-full": "w-full h-full",
		"text-36px": "text-36px"
	},
	content: {
		filesystem: ["src/*.{html,js,ts,jsx,tsx,vue,svelte,astro}"]
	},
	theme: {
		colors: {
			primary: "var(--primary)",
			dander: "var(--dander)",
			green: "var(--green)",
			blue: "var(--blue)",

			"red-22": "red",
			"tc-1": "var(--text-color-1)",
			"tc-2": "var(--text-color-2)",
			"tc-3": "var(--text-color-3)",
			"tc-4": "var(--text-color-4)",
			"tc-5": "var(--text-color-5)",
			"tc-6": "var(--text-color-6)",
			"page-bg": "var(--bg)"
		}
		// breakpoints: {
		// 	sm: "640px",
		// 	md: "768px",
		// 	lg: "1024px",
		// 	xl: "1280px",
		// 	"2xl": "1440px"
		// }
	},
	presets: [presetUno(), presetAttributify(), presetIcons()],
	transformers: [transformerDirectives(), transformerVariantGroup()],
	rules: [
		["absolute", { position: "absolute" }],
		["fixed", { position: "fixed" }],
		["relative", { position: "relative" }],
		["static", { position: "static" }],
		["sticky", { position: "sticky" }]
	]
});

// sm	@media (min-width: 640px)
// md	@media (min-width: 768px)
// lg	@media (min-width: 1024px)
// xl	@media (min-width: 1280px)
// 2xl	@media (min-width: 1536px)
// min-[…]	@media (min-width: …)
// max-[…]	@media (max-width: …)
